<template>
    <div id="albumInfo_2_">
        <div class="container">
            <!-- <p>111</p> -->
            <el-form ref="songInfoData_" :model="songInfoData_" :rules="rules" label-width="120px">
                <div class="wrapper">
                    <div style="display: inline-block; " class="wrapper-left">
                        <el-form-item label="专辑ID:">
                            <el-input class="w" v-model="songInfoData_.externalId" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="专辑名:" prop="name">
                            <el-input class="w" v-model="songInfoData_.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="全拼:">
                            <el-input class="w" v-model="songInfoData_.namePinyinFull" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:">
                            <el-input class="w" v-model="songInfoData_.namePinyinShort" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="专辑子标题:">
                            <el-input class="w" v-model="songInfoData_.subtitle" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="歌手名:">
                            <el-input class="w" v-model="songInfoData_.tblActors[0].name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="icpn:">
                            <el-input class="w" v-model="songInfoData_.icpn" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="upc:">
                            <el-input class="w" v-model="songInfoData_.upc" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="语言:" prop="language">
                            <el-select
                                :clearable="true"
                                v-model="songInfoData_.language"
                                placeholder="请选择语言"
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option key="0" label="国语" value="zh"></el-option>
                                <el-option key="1" label="英语" value="en"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="风格:" prop="genre">
                            <el-select
                                :clearable="true"
                                v-model="songInfoData_.genre"
                                placeholder="请选择风格"
                                class="handle-select mr10 w"
                                multiple
                                disabled
                            >
                                <el-option
                                    v-for="(item, index) in genres_2"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                                <!-- <el-option key="1" label="摇滚" value="1"></el-option> -->
                            </el-select>
                        </el-form-item>

                        <el-form-item label="发行日期:" prop="releaseDate">
                            <div class="block w">
                                <el-date-picker class="w" disabled v-model="songInfoData_.releaseDate" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item label="发行单位:">
                            <el-input disabled class="w" v-model="songInfoData_.releaseUnit"></el-input>
                        </el-form-item>

                        <el-form-item label="发行区域:">
                            <el-select
                                :clearable="true"
                                v-model="songInfoData_.releaseArea"
                                placeholder="请选择发行区域"
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option
                                    v-for="(item, index) in releaseAreas"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                                <!-- <el-option key="1" label="ZH" value="1"></el-option> -->
                            </el-select>
                        </el-form-item>

                        <el-form-item label="制片公司:">
                            <el-input disabled class="w" v-model="songInfoData_.makeCompany"></el-input>
                        </el-form-item>

                        <el-form-item label="音像公司:">
                            <el-input disabled class="w" v-model="songInfoData_.audioCompany"></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block; " class="wrapper-right">
                        <el-form-item prop="tblAlbumPictures">
                            <!-- <el-input class="w" v-model="songInfoData_.audioCompany"></el-input> -->
                            <div class="upload-file">
                                <div class="show-img" v-if="show">
                                    <img
                                        ref="img"
                                        :src="
                                            `${baseUrl}/api/stream/audio?path=${
                                                songInfoData_.tblAlbumPictures ? songInfoData_.tblAlbumPictures[0].filePath : ''
                                            }`
                                        "
                                        alt=""
                                    />
                                    <!-- <span class="after" @click="removeFile(index)"
                                        ><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
                                    /></span> -->
                                </div>
                                <!-- 文件上传按钮 -->
                                <a href="javascript:void(0)" class="btn" v-if="!show">
                                    <span class="add-btn">
                                        <img src="@/assets/img/ico_feedback_add@2x.png" alt="" />
                                    </span>
                                    <input type="file" accept="image/*" capture="camera" id="file" name="file" @change="upload" />
                                </a>
                            </div>

                            <!-- <div class="upload-btn">
                                <div class="img-size">
                                    <p class="tips-title">上传图片至少：240*240（文件不大于5M）</p>
                                    <p class="size">
                                        <label for="240">
                                            <input type="radio" name="size" id="240" />
                                            240
                                        </label>
                                        <label for="320">
                                            <input type="radio" name="size" id="320" />
                                            320
                                        </label>
                                        <label for="600">
                                            <input type="radio" name="size" id="600" />
                                            600
                                        </label>
                                        <label for="1000">
                                            <input type="radio" name="size" id="1000" />
                                            1000
                                        </label>
                                    </p>
                                </div>
                                <a href="javascript:void(0)" class="btn">
                                    上传图片
                                    <input type="file" id="file" name="file" @change="upload" />
                                </a>
                            </div> -->
                        </el-form-item>

                        <el-form-item label="同步ID：">
                            <el-input class="w" disabled v-model="songInfoData_.externalId"></el-input>
                        </el-form-item>

                        <el-form-item label="价格(单位：分)：">
                            <el-input disabled class="w" v-model="songInfoData_.price"></el-input>
                        </el-form-item>

                        <el-form-item label="信息来源：">
                            <el-select
                                :clearable="true"
                                v-model="songInfoData_.infoSrc"
                                placeholder="请选择信息来源"
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option key="0" label="合作商专辑" :value="0"></el-option>
                                <el-option key="2" label="自制专辑" :value="2"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="包含歌曲类型：">
                            <el-select
                                disabled
                                :clearable="true"
                                v-model="songInfoData_.type"
                                placeholder="请选择状态"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="没有下线歌曲" :value="0"></el-option>
                                <el-option key="1" label="存在下线歌曲" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="isbn:">
                            <el-input disabled class="w" v-model="songInfoData_.isbn"></el-input>
                        </el-form-item>

                        <el-form-item label="状态：" prop="status">
                            <el-select
                                :clearable="true"
                                v-model="songInfoData_.status"
                                placeholder="请选择状态"
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option key="1" label="有效" :value="1"></el-option>
                                <el-option key="2" label="版权到期下线" :value="2"></el-option>
                                <el-option key="3" label="违规专辑下线" :value="3"></el-option>
                                <el-option key="4" label="其他原因下线" :value="4"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="描述:">
                            <!-- <el-input class="w" v-model="songInfoData_.description"></el-input> -->

                            <el-input
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="songInfoData_.description"
                                maxlength="120"
                                show-word-limit
                                rows="5"
                                disabled
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>

                <!-- <el-form-item>
                    <el-button type="reset" @click="handleReset">取消</el-button>
                    <el-button
                        :disabled="
                            checkRequire({
                                name: songInfoData_.name,
                                language: songInfoData_.language,
                                genre: songInfoData_.genre,
                                releaseDate: $standardDateToTimstamp(songInfoData_.releaseDate),
                                status: songInfoData_.status
                            })
                        "
                        type="primary"
                        @click="handleSave"
                        >保存</el-button
                    >
                </el-form-item> -->
            </el-form>
        </div>
    </div>
</template>

<script>
import { genres_2 } from '@/components/common/index';
import { releaseAreas } from '@/components/common/index';
import { mapGetters, mapActions, mapMutations } from 'vuex';
export default {
    name: 'AlbumInfo_2_',
    components: {},
    computed: {
        ...mapGetters(['songInfoData_'])
        // songInfoData_: function() {
        //     return this.$store.getters.songInfoData_;
        // }
    },
    watch: {
        // songInfoData_(a, b) {
        //     console.log(a, b);
        //     this.setSongInfoData_(a);
        // },
        // deep: true
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_SRC1,
            // srcs: ['http://static.xingfeng.cool/images/avatar.jpeg'],
            show: true,
            genres_2: genres_2,
            releaseAreas,
            rules: {
                name: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                // singerName: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                language: [{ required: true, message: '请选择语言', trigger: 'change' }],
                genre: [{ required: true, message: '请选择歌单数量', trigger: 'change' }],
                releaseDate: [{ required: true, message: '请选择类型', trigger: 'change' }],
                tblAlbumPictures: [{ required: true, message: '请选择类型', trigger: 'change' }],
                status: [{ required: true, message: '请选择类型', trigger: 'change' }]
            },
            form_: {
                id: '5658978',
                name: '尚未界定',
                namePinyinFull: 'shangweijieding',
                namePinyinShort: 'swjd',
                subtitle: '',
                tblActors: [{ name: '' }],
                icpn: '',
                upc: '',
                language: '',
                genre: [],
                releaseDate: '',
                releaseUnit: '',
                releaseArea: '',
                makeCompany: '',
                audioCompany: '',
                externalId: '678987',
                price: '',
                infoSrc: '',
                type: '',
                isbn: '',
                status: '',
                description: '',
                tblAlbumPictures: [{ filePath: 'http://static.xingfeng.cool/images/avatar.jpeg' }]
                //
            }
        };
    },
    activated() {
        // this.getDataById(this.$route.query.id);
    },
    methods: {
        handleInput(value) {
            console.log(value);
            console.log(this.songInfoData_);
            // this.setSongInfoData_(this.songInfoData_);
            this.SET_SONGINFODATA_(this.songInfoData_);
        },
        ...mapActions(['setSongInfoData_']),
        ...mapMutations(['SET_SONGINFODATA_']),
        // async obsTohttp() {
        //     try {
        //         let obsurl = `/stream/audio`;
        //         return this.$http[0].get(obsurl, {
        //             params: {
        //                 path: albumPicture.filePath
        //             }
        //         });
        //         // console.log('图片路径', fileUrl);
        //     } catch (err) {}
        // },
        async getDataById(aid) {
            try {
                let url = '/album/detail';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: aid
                    })
                });
                console.log('专辑信息_2', res);
                // 解构
                let {
                    id,
                    name,
                    namePinyinFull,
                    namePinyinShort,
                    subtitle,
                    tblActors,
                    icpn,
                    upc,
                    language,
                    genre,
                    releaseDate,
                    releaseUnit,
                    releaseArea,
                    makeCompany,
                    audioCompany,
                    externalId,
                    price,
                    infoSrc,
                    type,
                    isbn,
                    status,
                    description,
                    tblAlbumPictures
                } = res.data;

                // 中间处理

                if (tblActors) {
                    tblActors.name = '';
                    if (tblActors && tblActors.length !== 0) {
                        tblActors.map(item => {
                            tblActors.name += item.name + '/';
                        });
                    }
                    tblActors.name = tblActors.name.slice(0, -1);
                } else {
                    tblActors = [{ name: '' }];
                }

                releaseDate = this.$timstampToStandardDate(releaseDate);
                price = this.$getNumber(price);
                infoSrc = this.$getNumber(infoSrc);
                type = this.$getNumber(type);
                status = this.$getNumber(status);
                tblAlbumPictures = tblAlbumPictures ? tblAlbumPictures : [];
                // 赋值
                this.form_ = {
                    id,
                    name,
                    namePinyinFull,
                    namePinyinShort,
                    subtitle,
                    tblActors,
                    icpn,
                    upc,
                    language,
                    genre,
                    releaseDate,
                    releaseUnit,
                    releaseArea,
                    makeCompany,
                    audioCompany,
                    externalId,
                    price,
                    infoSrc,
                    type,
                    isbn,
                    status,
                    description,
                    tblAlbumPictures
                };

                // document.querySelector('.tags-li.active .tags-li-title').innerHTML = this.form_.name;
                // res.data.tblActors.actorImportName = '';
                // res.data.tblActors.map(subItem => {
                //     res.data.tblActors.actorImportName += subItem.name + '/';
                // });
                // res.data.tblActors.actorImportName = res.data.tblActors.actorImportName.slice(0, -1);
                // res.data.createTime = this.$dateFormat(res.data.createTime, '', '/');
                // res.data.updateTime = this.$dateFormat(res.data.updateTime, '', '/');
                // this.tableData = [res.data];
                // this.pageTotal = 1 || 0;
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleSave() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.save();
                })
                .catch(() => {});
        },
        checkRequire(obj) {
            return this.$isEmpty(obj);
        },
        async save() {
            try {
                let url = '/album/update';
                let { data: res } = await this.$http[0].post(
                    url,
                    this.$removeField({
                        // id: this.form_.id,
                        // namePinyinFull: this.form_.namePinyinFull,
                        // namePinyinShort: this.form_.namePinyinShort,
                        // subtitle: this.form_.subtitle,
                        // icpn: this.form_.icpn,
                        // language: this.form_.language,
                        // genre: this.form_.genre.join(','),
                        // releaseUnit: this.form_.releaseUnit,
                        // makeCompany: this.form_.makeCompany,
                        // audioCompany: this.form_.audioCompany,
                        // isbn: this.form_.isbn,
                        // price: this.form_.price,
                        // infoSrc: this.form_.infoSrc,
                        // type: this.form_.type,
                        // status: this.form_.status,
                        // description: this.form_.description

                        id: this.songInfoData_.id,
                        // name: this.songInfoData_.name,
                        namePinyinFull: this.songInfoData_.namePinyinFull,
                        namePinyinShort: this.songInfoData_.namePinyinShort,
                        subtitle: this.songInfoData_.subtitle,
                        icpn: this.songInfoData_.icpn,
                        language: this.songInfoData_.language,
                        genre: this.songInfoData_.genre.join(','),
                        releaseUnit: this.songInfoData_.releaseUnit,
                        makeCompany: this.songInfoData_.makeCompany,
                        audioCompany: this.songInfoData_.audioCompany,
                        isbn: this.songInfoData_.isbn,
                        price: this.songInfoData_.price,
                        infoSrc: this.songInfoData_.infoSrc,
                        type: this.songInfoData_.type,
                        status: this.songInfoData_.status,
                        description: this.songInfoData_.description
                    }),
                    {
                        headers: {
                            name: localStorage.getItem('ms_username')
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.$router.replace({
                    path: '/album_3/admin'
                });
            } catch (err) {
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleReset() {},
        removeFile(index) {
            this.form_.tblAlbumPictures.splice(index, 1);
            this.show = false;
        },
        upload(e) {
            var event = e || window.event;
            var target = event.target || e.srcElement;
            this.show = true;
            var file = target.files[0];
            this.$getImgTest.call(this, e, target, file, null);
        },
        async uploadFile(e, target, file) {
            try {
                var formdata = new FormData();
                formdata.append('file', file);
                formdata.append('id', this.$route.query.id);
                let url = '/album/uploadImg';

                let { data: res } = await this.$http[0].post(url, formdata, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        name: localStorage.getItem('ms_username')
                    }
                });
                console.log('响应数据', res);
                target.value = null;
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
            } catch (err) {
                console.dir(err);
                target.value = null;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        }
    }
};
</script>

<style lang="scss">
#albumInfo_2_ {
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        /* width: 120px; */
        width: 185px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .w {
        // width: 470px !important;
        width: 100% !important;
    }

    .upload-file {
        background: transparent;
        position: relative;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 260px;
        align-items: center;
        align-content: flex-start;
        justify-items: center;
        grid-auto-flow: row;
        margin-bottom: 10px;
        .show-img {
            width: 250px;
            height: 250px;
            position: relative;
            border-radius: 15px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 15px;
                box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
            }
            .after {
                position: absolute;
                right: -0.26rem;
                top: -0.26rem;
                font-size: 1.04rem;
                width: 1.04rem;
                height: 1.04rem;
                line-height: 1.04rem;
                text-align: center;
            }
        }
        .btn {
            border: 1px dashed #666;
            position: relative;
            left: 0;
            display: inline-block;
            text-align: center;
            color: #fff;
            text-decoration: none;
            width: 250px;
            height: 250px;
            border-radius: 15px;
            .add-btn {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                width: 30px;
                height: 30px;
                border-radius: 15px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            #file {
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 15px;
            }
        }
    }

    .upload-btn {
        // text-align: right;
        display: flex;
        flex-direction: row;
        justify-content: center;
        // padding-left: 110px;
        // margin-right: 120px;
        align-items: center;
        .img-size {
            // margin-right: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: left;

            .tips-title {
                font-size: 14px;
                height: 16px;
                line-height: 16px;
                margin-bottom: 10px;
            }
            .size {
                height: 16px;
                line-height: 16px;
                margin-left: 2px;
                label {
                    cursor: pointer;
                    margin-right: 10px;
                    input {
                        cursor: pointer;
                    }
                }
            }
        }
        .btn {
            position: relative;
            display: inline-block;
            text-align: center;
            color: #fff;
            text-decoration: none;
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #409eff;
            border-radius: 3px;
            font-size: 12px;
            vertical-align: middle;
            margin-left: 10px;
        }
        input[name='file'] {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
        }
    }

    .wrapper {
        display: grid;
        grid-template-columns: 45% 55%;
        justify-content: flex-start;
        justify-items: left;
        grid-auto-flow: row;
        align-items: flex-start;
        align-content: flex-start;
        padding-top: 10px;
        box-sizing: border-box;
        .wrapper-left {
            width: 90%;
            .el-form-item {
                .el-form-item__label-wrap {
                    margin-left: 0px !important;
                    width: 120px;
                    text-align: right;
                }
                .el-form-item__content {
                    margin-left: 120px !important;
                }
            }
        }
        .wrapper-right {
            width: 90%;
            transform: translate3d(0px, -5px, 0px);
            // .el-form-item {
            //     &:first-of-type {
            //         .el-form-item__content {
            //             // display: flex;
            //             // flex-direction: row;
            //             // align-items: center;
            //         }
            //     }
            // }

            .el-form-item {
                .el-form-item__label-wrap {
                    margin-left: 0px !important;
                    width: 120px;
                    text-align: right;
                }
                .el-form-item__content {
                    margin-left: 120px !important;
                }
            }
        }
    }
}
</style>
